Day18 動畫2

動畫指令除了可以在時間內的變化之外，也可以永恆的維持下去，來看一個簡單的範例。

先宣告一個變數：

@State private var height: Double = 0

宣告矩形形狀，將變數放在高度的輸入，例如：

Rectangle()
    .frame(width: 60, height: height)
    .foregroundStyle(.blue)

當畫面生成時，執行一個3秒的動畫，會將變數從0到200，例如：

Rectangle()
    .frame(width: 60, height: height)
    .foregroundStyle(.blue)
    .onAppear {
        withAnimation(.easeInOut(duration: 3)) {
            height = 200
        }
    }

顯示如圖：

但這樣的做法，並無法永恆維持下去，只要時間到達設定的3秒後，動畫效果就會停止，要讓動畫永恆維持，必須要使用repeatForever指令。

宣告一個圓形，例如：

Circle()
    .foregroundStyle(.blue)
    .frame(width: 120)

宣告一個變數，用來指定目前圓形的大小範圍：

@State private var scale: Double = 0.5

使用scaleEffect屬性綁定到變數scale：

Circle()
    .foregroundStyle(.blue)
    .frame(width: 120)
    .scaleEffect(x: scale, y: scale)

加入動畫指令，並且加入repeatForever指令，表示如果執行的動畫時間結束，會重新再度執行動畫：

Circle()
    .foregroundStyle(.blue)
    .frame(width: 120)
    .scaleEffect(x: scale, y: scale)
    .animation(.linear(duration: 4).repeatForever(autoreverses: true), value: scale)
    .onAppear {
        scale = 1
    }

顯示如圖：

除了放大縮小的效果之外，也可以用在旋轉動畫上，宣告一個變數rotation：

@State private var rotation: Double = 0

使用rotationEffect屬性綁定到這個變數，由於rotationEffect必須要帶入的單位為度數，所以使用degrees來將變數轉換為度數單位：

Circle()
    .foregroundStyle(.blue)
    .frame(width: 120)
    .rotationEffect(.degrees(rotation))
    .animation(.linear(duration: 4).repeatForever(autoreverses: true), value: rotation)
    .onAppear {
        rotation = 360
    }

因為圓形的位置在原點，無法看出旋轉的效果，必須要產生一個位移，才能看出效果，所以使用offset移動x軸的位置：

 Circle()
    .foregroundStyle(.blue)
    .frame(width: 120)
    .offset(x: -20, y: 0)
    .rotationEffect(.degrees(rotation))
    .animation(.linear(duration: 4).repeatForever(autoreverses: true), value: rotation)
    .onAppear {
        rotation = 360
    }

顯示如圖：

從 SwiftUI 到 Apple Vision Pro - SwiftUI 從零開始 Day18 [完]